
/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";
import react from 'react'
// let hazardous = this.props.hazardous
var ColorArr = [[(100 - 99) / 100, '#F3CCA0'], [1, 'rgba(20, 29, 41, 0.8)']]


class LeftCenter5 extends react.Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    onLeftCenter5 = () => {
        // console.log('onLeftCenter5')
        this.props.onLeftCenter5()
    }




    setOption = () => {
        return {
                title: {

                    text: '累计细胞数',
                    left: 'center',
                    top: '30%', //top待调整
                    textStyle: {
                        color: '#fff',
                        fontSize: 12,
                    },
     
                    itemGap: -4 //主副标题间距
                },
                polar: {
                    center: ['85%', '60%'], // 控制点的位置
                    // radius: 90 + "%"
                },
                visualMap: {
                    show: false,
                    seriesIndex: 1,
                    dimension: 1,
                    type: 'continuous',
                    min: 0,
                    max: 180,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
        
                },
                angleAxis: {
                    type: 'value',
                    min: 0,
                    max: 360,
                    startAngle: 180,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                radiusAxis: {
                    min: 0,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [
                    //第一个图表
                    {
                    name: "仪盘表",
                    type: "gauge",
                    splitNumber: 20,
                    radius: '75%',
                    startAngle: 90,
                    endAngle: -269,
                    clockwise: true,
                    axisLine: {
                        "lineStyle": {
                            "color": [
                                ...ColorArr
                            ],
    
                            width: 10,
                            opacity: 1,
                        },
                        show: true,
                        length: 10
                    },
                    axisTick: {
                        lineStyle: {
                            // color:'rgb(51, 51, 51)',
                            color: '#0D202E',
                            width: 4,
                            opacity: 1
                        },
                        length: 10,
                        splitNumber: 1,
    
                    },
                    pointer: {           // 分隔线
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10,
                        show: false
                    },
                    axisLabel: {
                        // distance: 10,
                        // textStyle: {
                        //     color: "#fff"
                        // },
                        show: false,
                    },
                    splitLine: {
                        "show": false
                    },
                  
                    // itemStyle: {
                    //     normal: {
                    //         color: "#494f50"
                    //     }
                    // },
                    detail: {
                        formatter: "{value}",
                        offsetCenter: [0, "50%"],
                        textStyle: {
                            fontSize: 20,
                            color: "#F3CCA0"
                        }
                    },
                    data: [{
    
                        value:85
                    }]
                },
                {
                    name: '外圈圆',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: -179.9,
                    radius: '90%',
                    splitNumber: 35,
                    center: ['50%', '50%'],
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 2,
                            color: [[0, '#F3CCA0'], [1, '#F3CCA0']]
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    // data: [{value: 50, name: '00'}]
                },
                {
                    name: '外圈圆',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: -179.9,
                    radius: '75%',
                    splitNumber: 35,
                    center: ['50%', '50%'],
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 2,
                            color: [[0, '#79715D'], [1, '#79715D']]
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    // data: [{value: 50, name: '00'}]
                },
                {
                    name: 'point',
                    type: "effectScatter",
                    coordinateSystem: "polar",
                    zlevel: 0,
                    z: 14,
                    rippleEffect: {
                        //涟漪特效
                        period: 4, //动画时间，值越小速度越快
                        brushType: "stroke", //波纹绘制方式 stroke, fill
                        scale: 3 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "right", //显示位置
                            offset: [0, 0], //偏移设置
                            formatter: "{b}", //圆环显示文字,
                            color: "red"
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: "circle",
                    symbolSize: 3,
                    itemStyle: {
                        normal: {
                            show: true,
                            color: "#fff"
                        }
                    },
        
                    data: [
                        [9.65, 87.7]
                    ]
                },
               
                //第二个图表
               
                ]
          

            }
        }
    
        render() {
            return (
                <div className="situational-detail" onClick={this.onLeftCenter5}>
                    <Chart
                        echarts={echarts}
                        option={this.setOption()}
                        notMerge
                        lazyUpdate
                        style={{ height: 90, width: 90 }}
                    />
                </div>
            )
        }
    
    }
    export default LeftCenter5;



